<template>
	<view class="edit-info">
		<view class="flex-box center align-center p-3">
			<button class="avatar-wrapper" :plain="true" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" :src="user.avatar" mode="aspectFill"></image>
				<view class="font2">请选择用户头像</view>
			</button>
		</view>
		<view class="nickname">
			<input class="input" @blur="nicknameBlur" name="nickname" type="nickname" placeholder="请输入昵称" maxlength="10"
				:value="user.nickname" />

		</view>

		<button class="submit-btn" form-type="submit" type="primary" @click="submitBtnClick">
			注册
		</button>

	</view>
</template>

<script setup>
	import {
		callWithErrorHandling,
		reactive,
		ref
	} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		setUserAvatar,
		setUserNickName,
		getUserInfo
	} from "@/store/user";
	import {
		getFileExtension,
		isValidUsername
	} from "../../utils/tools.js"
	import {
		getTodayDateString
	} from '../../utils/common.js'
	import {
		getUserOpenId
	} from '../../utils/getOpenId.js'
	import md5 from 'js-md5'
	const user = ref({
		avatar: '../../static/user/header.jpeg',
		nickname: ""
	})

	let openId = "";

	onShow(() => {
		//引入公共模块

	})

	function nicknameBlur(e) {
		user.value.nickname = e.detail.value;
	}

	async function handleEditNickname(e) {
		if (e.detail.value.nickname && e.detail.value.nickname.length > 0) {
			user.value.nickname = e.detail.value.nickname;
			const openid = await getUserOpenId();
			await uniIdCo.refreshCaptcha({
				scene
			})
			const res = await uniIdCo.registerUser({
				username: openid,
				password: md5(openid).substring(0, 10),
				nickname: user.value.nickname,
				avatar: user.value.avatar,
				captcha: '90sA'
			});
		} else {
			uni.showToast({
				title: "请输入昵称",
				icon: "none"
			})
		}

	}

	function onChooseAvatar(e) {
		uni.showLoading({
			title: "上传中",
		});

		const {
			avatarUrl
		} = e.detail;
		user.value.avatar = avatarUrl;
		const time = new Date().getTime();
		getUserOpenId().then(openid => {
			openId = openid;
			const uploadPath = "/resource/guaguale/user/header/" + openId +"-"+ time+"." + getFileExtension(avatarUrl);
			uniCloud.uploadFile({
				filePath: avatarUrl,
				cloudPath: uploadPath,
				cloudPathAsRealPath: true,
				success: res => {
					user.value.avatar = res.fileID;
					uni.hideLoading()
				},
				fail: err => {;
					uni.hideLoading()
					const uploadURL =
						"https://mp-b4609b89-f010-4b4d-8ed3-0087451c83a0.cdn.bspapp.com" + uploadPath;
					user.value.avatar = uploadURL;
				}
			})
		})
	}

	async function submitBtnClick() {

		if (user.value.avatar === '../../static/user/header.jpeg') {
			uni.showToast({
				title: "请选择用户头像",
				icon: "none"
			})
			return;
		}

		if (!user.value.nickname || user.value.nickname.length < 3) {
			uni.showToast({
				title: "用户昵称至少3个字符",
				icon: "none"
			})
			return;
		}
		if (isValidUsername(user.value.nickname) === false) {
			uni.showToast({
				title: "用户昵称不合法，不支持符号等特殊字符",
				icon: "none"
			})
			return;
		}

		uni.showLoading({
			title: "注册中...",
			mask: true,
		})
		const db = uniCloud.database();
		const userInfo = {
			username: openId,
			password: openId,
			nickname: user.value.nickname,
			avatar: user.value.avatar,
			score: 1000,
			todayscore: 0,
			todayscoredate: getTodayDateString()
		};
		db.collection("open_user").add(userInfo).then(info => {
			uni.hideLoading()
			uni.showToast({
				title: "注册成功，快来刮出你的第一个百万大奖吧！",
				icon: "none"
			})
			uni.setStorageSync("kUsername", openId);
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/index/loading'
				})
			}, 1000)
		}).catch(e => {
			uni.hideLoading()
			uni.showToast({
				title: "注册失败，请稍后再试",
				icon: "none"
			})
		})
	}
</script>

<style lang="scss">
	.edit-info {
		width: 100%;
		height: 100%;
		box-sizing: border-box;

		.avatar-wrapper {
			margin-top: 100rpx;
			background-color: #fff;
			border: 0 none;
			line-height: 1.5;

			.avatar {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
				border: 1rpx solid rgba(255, 255, 255, 0.3);
				background-color: #ddd;
			}
		}

		.nickname {
			box-sizing: border-box;
			margin-top: 50rpx;
			height: 100rpx;
			margin-left: 50rpx;
			margin-right: 50rpx;
			position: relative;
			border: 1rpx solid #ccc;
			align-items: center;
			border-radius: 20rpx;
			// padding: 20rpx 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;

			.input {
				margin-left: 30rpx;
				margin-right: 30rpx;
				width: 100%;
				height: 100%;
			}
		}

		.submit-btn {
			margin-top: 50rpx;
			margin-left: 50rpx;
			margin-right: 50rpx;
			height: 100rpx;
		}
	}
</style>